<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { Button, Tag, Table, Card, Space, message } from 'ant-design-vue';
import { getSystemMenus } from '#/api/core/explanation';
import modal from './modal.vue';
import { IconifyIcon } from '@vben/icons';
import { useRoute } from 'vue-router';

defineOptions({ name: 'SubAccounts' });
const dataSource = ref([]);
const tableLoading = ref(false);
const route = useRoute();

const [ModalForm, modalApi] = useVbenModal({
  connectedComponent: modal,
});
const fetchTableData = async (params?: PaginationParams) => {
  tableLoading.value = true;
  await getSystemMenus(params)
    .then((response) => {
      dataSource.value = response.list;
    })
    .catch((error) => {
      message.error(error);
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
function openModal(record?: TypeRecord) {
  modalApi.setData({
    data: {
      record,
      isEdit: !!record,
    },
  });
  modalApi.open();
}

onMounted(() => {
  fetchTableData();
});

const columns = [
  {
    title: '菜单名称',
    dataIndex: 'menuName',
    key: 'menuName',
    expandable: true,
  },
  {
    title: '前台路径',
    dataIndex: 'frontEndPath',
    key: 'frontEndPath',
  },
  {
    title: '页面标识',
    dataIndex: 'pageIdentity',
    key: 'pageIdentity',
  },
  {
    title: '组件路径',
    dataIndex: 'component',
    key: 'component',
  },
  {
    title: '重定向',
    dataIndex: 'redirect',
    key: 'redirect',
  },
  {
    title: '展示',
    dataIndex: 'visible',
    key: 'visible',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
];

</script>

<template>
  <Page :title="route.meta.title">
    <ModalForm />
    <template #extra>
      <Button
          type="primary"
          @click="openModal()"
          class="flex-center inline-flex gap-2"
        >
          <template #icon>
            <IconifyIcon icon="heroicons:plus" />
          </template>
          新增菜单
        </Button>
    </template>
    <Card>
      <Table
        size="small"
        :dataSource="dataSource"
        :columns="columns"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <Space>
              <Button type="link" @click="openModal(record as TypeRecord)"
                >新增</Button
              >
              <Button type="link" @click="openModal(record as TypeRecord)"
                >编辑</Button
              >
              <Button type="link">删除</Button>
            </Space>
          </template>
          <template v-else-if="column.key === 'visible'">
            <span v-if="record.visible == 1" class="isShow">展示</span>
            <span v-else class="isHide">隐藏</span>
          </template>
          <template v-else-if="column.key === 'status'">
            <Tag
              :color="
                record.status === 0
                  ? 'success'
                  : record.status === 1
                    ? 'error'
                    : record.status === 1
                      ? 'processing'
                      : 'default'
              "
            >
              {{
                record.status === 0
                  ? '已上线'
                  : record.status === 1
                    ? '待弃用'
                    : record.status === 2 && '开发中'
              }}
            </Tag>
          </template>
        </template>
      </Table>
    </Card>
  </Page>
</template>

<style lang="scss" scoped>
.isShow {
  color: #7cb305;
}
.isHide {
  color: #8c8c8c;
}
</style>
